<template>
	<view class="container">
		<!-- 记录列表区域 -->
		<scroll-view class="record-list" scroll-y refresher-enabled @refresherrefresh="onRefresh"
			@scrolltolower="loadMore" :refresher-triggered="isRefreshing">
			<view class="record-item" v-for="(item, index) in recordList" :key="index" @click="goDetail(item)">
				<image v-if="item?.audit=='AUDITED'&&item?.isRewarded" :src="`${resourcesPath}/image/rewarded.png`" class="audit-image" mode=""></image>
				<image v-if="item?.audit&&!item?.isRewarded" :src="`${resourcesPath}/image/${item?.audit}.png`" class="audit-image" mode=""></image>
				<view class="record-header">
					<view class="time-info">
						<text class="date">{{dayjs(item.createTime).format('YYYY-MM-DD')}}</text>
						<text class="time">{{dayjs(item.createTime).format('HH:mm')}}</text>
					</view>
					<text class="location">{{item.subdistrict}}</text>
				</view>

				<view class="tags-container">
					<view class="tag tag-blue">
						乱张贴
					</view>
				</view>
				<view class="address-container">
					<uni-icons class="location-icon" type="location" size="16" color="#666666" />
					<text class="address">{{item.street}}</text>
					<uni-icons class="arrow-icon" type="right" size="16" color="#CCCCCC" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import {resourcesPath} from '@/config/common.js'
	import dayjs from '@/utils/dayjs.main.js'
	import {
		nextTick,
		onMounted,
		reactive,
		ref
	} from "vue";
	import { request } from "../../utils/api";
import { mainStore } from '../../store';
	
	const pageInfo = reactive({
		page: 1,
		pageSize: 15,
		total: 0
	})
	const isRefreshing = ref(false);

	const recordList = ref<PosterItem[]>([
		// {
		// 	date: '2024-01-20',
		// 	time: '09:30',
		// 	district: '高新区',
		// 	types: ['小广告', '野广告'],
		// 	address: '芳草街道办 紫荆北路'
		// },
	]);

	const handleFilter = () => {
		// 处理筛选逻辑
	};

	const goDetail = (item : PosterItem) => {
		// 跳转详情页面
		uni.navigateTo({
			url: `/pages/detail/detail?id=${item.id}`
		})
	};

	const onRefresh = () => {
		isRefreshing.value = true;
		setTimeout(() => {
			isRefreshing.value = false;
		}, 1000);
	};

	const loadMore = () => {
		// 加载更多数据
		if (pageInfo.page * pageInfo.pageSize >= pageInfo.total) {
			return
		}
		pageInfo.page++
		getListData()
	};
	const getListData = () => {
		let { page, pageSize } = pageInfo
		let queryData:any = {}
		queryData.creatorUserId = (mainStore().userInfo?.id??"")+""
		request({
			url: '/sanitation/v1/posters',
			method: 'GET',
			data: { page, pageSize,
			 query:JSON.stringify(queryData)
			 }
		}).then(res => {
			pageInfo.total = res.total;
			recordList.value = recordList.value.concat(res.items || [])
		})
	}
	const getTagClass = (tag : string) => {
		switch (tag) {
			case '小广告':
				return 'tag-blue';
			case '野广告':
				return 'tag-orange';
			case '商业广告':
				return 'tag-green';
			case '违规张贴':
				return 'tag-red';
			default:
				return '';
		}
	};
	onMounted(() => {
		getListData()
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--status-bar-height));
		background-color: #F5F5F5;
	}

	.record-list {
		flex: 1;
		overflow: auto;
		padding: 24rpx;
	}

	.record-item {
		background-color: #FFFFFF;
		border-radius: 12px;
		padding: 24rpx;
		margin-bottom: 24rpx;
		width: calc(100vw - 48rpx - 48rpx);
		position: relative;
		.audit-image{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.time-info {
		display: flex;
		flex-direction: column;
	}

	.date {
		font-size: 16px;
		color: #333333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.time {
		font-size: 14px;
		color: #666666;
	}

	.location {
		font-size: 14px;
		color: #666666;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-bottom: 24rpx;
	}

	.tag {
		padding: 8rpx 20rpx;
		border-radius: 4px;
		font-size: 12px;
	}

	.tag-blue {
		background-color: #E6F3FF;
		color: #1890FF;
	}

	.tag-orange {
		background-color: #FFF3E6;
		color: #FA8C16;
	}

	.tag-green {
		background-color: #E6FFF2;
		color: #52C41A;
	}

	.tag-red {
		background-color: #FFE6E6;
		color: #F5222D;
	}

	.address-container {
		display: flex;
		align-items: center;
	}

	.location-icon {
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.address {
		flex: 1;
		font-size: 14px;
		color: #666666;
		margin-right: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.arrow-icon {
		flex-shrink: 0;
	}
</style>